import { Button } from 'antd';
import type React from 'react';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const handleTheme = (t: string) => {
    maplessRef.current?.setStyle(t);
  };

  return (
    <div className={styles.test}>
      <Button
        onClick={() => {
          handleTheme('satellite');
        }}
      >
        satellite
      </Button>
      <Button
        onClick={() => {
          handleTheme('dark');
        }}
      >
        dark
      </Button>
      <Button
        onClick={() => {
          handleTheme('light');
        }}
      >
        light
      </Button>
      <Button
        style={{ opacity: 0.5 }}
        onClick={() => {
          handleTheme('streets');
        }}
      >
        streets
      </Button>
      <span style={{ flexBasis: '100%' }} />
      <Button
        onClick={() => {
          handleTheme('dz_satellite');
        }}
      >
        dz_satellite
      </Button>
      <Button
        onClick={() => {
          handleTheme('dz_dark');
        }}
      >
        dz_dark
      </Button>
      <Button
        onClick={() => {
          handleTheme('dz_light');
        }}
      >
        dz_light
      </Button>
      <Button
        onClick={() => {
          handleTheme('dz_streets');
        }}
      >
        dz_streets
      </Button>
      <Button
        onClick={() => {
          handleTheme('dz_cyber');
        }}
      >
        dz_cyber
      </Button>
    </div>
  );
};

export default Index;
